<template>
	<view>
		<!-- 组件部分 -->
		<view>
			<text>组件</text>
		</view>
		<view>
			<text>原生组件</text>
		</view>
		<view>
			<text>基础组件</text>
		</view>
		<view>
			<button @click="goToPage('pages/model/button/button')">按钮</button>
			<button @click="goToPage('pages/model/text-button/text-button')">文本按钮</button>
			<button @click="goToPage('pages/model/input/input')">输入框</button>
			<button @click="goToPage('pages/model/textarea/textarea')">文本框</button>
			<button @click="goToPage('pages/model/tag/tag')">标签</button>
			<button @click="goToPage('pages/model/badge/badge')">标徽</button>
			<button @click="goToPage('pages/model/title/title')">标题</button>
			<button @click="goToPage('pages/model/text/text')">文本</button>
			<button @click="goToPage('pages/model/table/table')">表格</button>
		</view>
		<view>
			<text>进阶组件</text>
		</view>
		<view>
			<button @click="goToPage('pages/model/loading/loading')">加载</button>
			<button @click="goToPage('pages/model/min-loading/min-loading')">最小加载</button>
			<button @click="goToPage('pages/model/window/window')">窗口</button>
			<button @click="goToPage('pages/model/tabs/tabs')">标签列表</button>
			<button @click="goToPage('pages/model/carousel/carousel')">轮播图</button>
			<button @click="goToPage('pages/model/upload-file-button/upload-file-button')">上传按钮</button>
			<button @click="goToPage('pages/model/tosat/tosat')">消息提示</button>
			<button @click="goToPage('pages/model/overlay/overlay')">遮罩层</button>
			<button @click="goToPage('pages/model/menu/menu')">菜单</button>
			<button @click="goToPage('pages/model/menu-slide/menu-slide')">滑动菜单</button>
			<button @click="goToPage('pages/model/header-navigation-bar/header-navigation-bar')">头部导航栏</button>
			<button @click="goToPage('pages/model/pull-up-refresh/pull-up-refresh')">上拉刷新</button>
			<button @click="goToPage('pages/model/null/null')">空</button>
			<button @click="goToPage('pages/model/scroll-list/scroll-list')">滚动列表</button>
			<button @click="goToPage('pages/model/input-code/input-code')">验证码文本框</button>
			<button @click="goToPage('pages/model/collapse/collapse')">折叠面板</button>
			<button @click="goToPage('pages/model/steps/steps')">步骤条</button>
		</view>
		<view>
			<text>复合组件</text>
		</view>
		<view>
			<button @click="goToPage('pages/model/image/image')">图片</button>
			<button @click="goToPage('pages/model/popup/popup')">弹窗</button>
			<button @click="goToPage('pages/model/dialog/dialog')">对话框</button>
			<button @click="goToPage('pages/model/picker-list/picker-list')">拾取器</button>
			<button @click="goToPage('pages/model/series-picker-list/series-picker-list')">二级拾取器</button>
			<button @click="goToPage('pages/model/select-picker/select-picker')">下拉框</button>
			<button @click="goToPage('pages/model/series-select-picker/series-select-picker')">二级下拉框</button>
			<button @click="goToPage('pages/model/drum-select-picker/drum-select-picker')">滚动下拉框</button>
			<button @click="goToPage('pages/model/date-time/date-time')">时间下拉框</button>
			<button @click="goToPage('pages/model/tabs-page/tabs-page')">标签页</button>
			<button @click="goToPage('pages/model/pages/pages')">分页</button>
			<button @click="goToPage('pages/model/radio-group/radio-group')">单选按钮组</button>
			<button @click="goToPage('pages/model/checkbox-group/checkbox-group')">复选框组</button>
			<button @click="goToPage('pages/model/form/form')">表单</button>
			<button @click="goToPage('pages/model/switch/switch')">开关</button>
		</view>
		<hr />
		<!-- 排版部分 -->
		<view>
			<text>排版</text>
		</view>
		<view>
			<button @click="goToPage('pages/layout/row/row')">行</button>
			<button @click="goToPage('pages/layout/list/list')">列表</button>
			<button @click="goToPage('pages/layout/card/card')">卡片</button>
			<button @click="goToPage('pages/layout/infinite-scroll/infinite-scroll')">无限滚动</button>
			<button @click="goToPage('pages/layout/grid/grid')">宫格布局</button>
			<button @click="goToPage('pages/layout/icon-grid/icon-grid')">图标宫格布局</button>
			<button @click="goToPage('pages/layout/waterfall/waterfall')">瀑布流式布局</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';

//跳转页面
function goToPage(page) {
	uni.navigateTo({
		url: '/' + page
	});
}
</script>

<style scoped>
/* 添加一些基础样式 */
button {
	margin: 10px;
	padding: 8px 16px;
	background-color: #007aff;
	color: white;
	border: none;
	border-radius: 4px;
}

text {
	font-size: 16px;
	margin: 10px 0;
	font-weight: bold;
}
</style>
